<template>
  <div id="app" class="wrapper">
    <img class="wrapper__img" src="./images/user.png" alt="user">
    <div class="wrapper__input">
      <input v-model="userName" class="wrapper__input__content" type="text" placeholder="请输入用户名">
    </div>
    <div class="wrapper__input">
      <input v-model="password" class="wrapper__input__content" type="password" placeholder="输入密码">
    </div>
    <div class="wrapper__loginButton" @click="Login">登陆</div>
    <div class="wrapper__register">
      <span>立即注册</span>
      <div class="seperator"></div>
      <span>忘记密码</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userName: '',
      password: ''
    }
  },
  methods: {
    // onclick事件
    Login() {
      console.log(this.userName, this.password)
      if (this.userName.length > 0 && this.password.length > 0) {
        alert(`用户名: ${this.userName} 密码: ${this.password}`)
      } else {
        alert("请输入用户名密码")
      }
    }
  }
}
</script>

<style scoped>
/* 这里可以引入外部的CSS文件 */
@import './css/login.css';

/* 也可以直接在这里写样式 */
.wrapper {
  /* 你的样式 */
}

.wrapper__img {
  /* 你的样式 */
}

.wrapper__input {
  /* 你的样式 */
}

.wrapper__input__content {
  /* 你的样式 */
}

.wrapper__loginButton {
  /* 你的样式 */
}

.wrapper__register {
  /* 你的样式 */
}

.seperator {
  /* 你的样式 */
}
</style>